<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head profile="http://gmpg.org/xfn/11">




<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>How to create chained select with PHP and jQuery? | Your Inspiration Web</title>

<link rel="stylesheet" href="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/wp-css-compress.css" type="text/css" media="screen">
<link rel="alternate" type="application/rss+xml" title="Your Inspiration Web RSS Feed" href="http://www.yourinspirationweb.com/en/feed/">
<link rel="alternate" type="application/atom+xml" title="Your Inspiration Web Atom Feed" href="http://www.yourinspirationweb.com/en/feed/atom/"> 
<link rel="pingback" href="http://www.yourinspirationweb.com/en/xmlrpc.php">

<!-- [favicon] begin -->
<link rel="shortcut icon" type="image/x-icon" href="http://www.yourinspirationweb.com/en/wp-content/themes/yiw-3.0-en/favicon.ico">
<link rel="icon" type="image/x-icon" href="http://www.yourinspirationweb.com/en/wp-content/themes/yiw-3.0-en/favicon.ico">
<!-- [favicon] end -->

<!--[if IE 7]>
    <link rel="stylesheet" href="http://www.yourinspirationweb.com/en/wp-content/themes/yiw-3.0-en/css/ie7.css" type="text/css" media="screen" />
<![endif]-->

<style type="text/css" media="screen">
	#page {}

</style>
 

<link rel="alternate" type="application/rss+xml" title="Your Inspiration Web » How to create chained select with PHP and jQuery? Comments Feed" href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/feed/">

<link rel="stylesheet" href="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/fancybox.css" type="text/css" media="screen">

	<style type="text/css">
		div#fancy_inner {border-color:#BBBBBB}
		div#fancy_close {right:-15px;top:-12px}
		div#fancy_bg {background-color:#FFFFFF}
			</style>

	<link rel="stylesheet" id="wp_dlmp_styles-css" href="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/styles.css" type="text/css" media="all">
<link rel="stylesheet" id="featured-post-css-css" href="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/featured-post.css" type="text/css" media="all">
<link rel="stylesheet" id="wp-pagenavi-css" href="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/pagenavi-css.css" type="text/css" media="all">
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/comment-reply.js"></script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/jquery.js"></script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/jquery_002.js"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.yourinspirationweb.com/en/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.yourinspirationweb.com/en/wp-includes/wlwmanifest.xml"> 
<link rel="index" title="Your Inspiration Web" href="http://www.yourinspirationweb.com/en/">
<link rel="start" title="October: Suggestions by the editorial staff" href="http://www.yourinspirationweb.com/en/october-suggestions-by-the-editorial-staff/">
<link rel="prev" title="WordPress: how to make dynamic the Header and the Sidebar of the template?" href="http://www.yourinspirationweb.com/en/wordpress-how-to-make-dynamic-the-header-and-the-sidebar-of-the-template/">
<link rel="next" title="Everything you need to know about mascots in web design" href="http://www.yourinspirationweb.com/en/everything-you-need-to-know-about-mascots-in-web-design/">
<meta name="generator" content="WordPress 3.0.4">
<link rel="shortlink" href="http://www.yourinspirationweb.com/en/?p=2494">

<!-- All in One SEO Pack 1.6.13.2 by Michael Torbert of Semper Fi Web Design[302,439] -->
<meta name="description" content="In this article we'll talk about the chaining of select also called select cascade. It is a procedure that we often find on the web and it consists in giving the user the possibility to find a specific data through a few passages: practically choosing a category in the first select, the second one will be populated with the results related with the category selected. We imagine, for example, a first select where it is possible to choose between motorcycles and cars; once we selected the car category , the second select will be populated with the brands of the cars available. Then selecting a brand, the third select will be populated with the models available of this brand. In this article we’ll see a very simple example but it will give us the basis to comprehend the procedure to do even in the case of more complicated cascades.">
<meta name="keywords" content="jquery,php,select">
<link rel="canonical" href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/">
<!-- /all in one seo pack -->

<!-- Start Of Script Generated By cforms v11.5 [Oliver Seidel | www.deliciousdays.com] -->
<link rel="stylesheet" type="text/css" href="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/minimal.css">
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/cforms.js"></script>
<!-- End Of Script Generated By cforms -->



<!-- Fancybox for WordPress v2.7.2 -->

<script type="text/javascript">

	jQuery.noConflict();

	jQuery(function(){

				jQuery.fn.getTitle = function() {
			var arr = jQuery("a.fancybox");
			jQuery.each(arr, function() {
				var title = jQuery(this).children("img").attr("title");
				jQuery(this).attr('title',title);
			})
		}

		// Supported file extensions
		var thumbnails = 'a:has(img)[href$=".bmp"],a:has(img)[href$=".gif"],a:has(img)[href$=".jpg"],a:has(img)[href$=".jpeg"],a:has(img)[href$=".png"],a:has(img)[href$=".BMP"],a:has(img)[href$=".GIF"],a:has(img)[href$=".JPG"],a:has(img)[href$=".JPEG"],a:has(img)[href$=".PNG"]';

	
		jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();

			jQuery("a.fancybox").fancybox({
			'imageScale': true,
			'padding': 10,
			'zoomOpacity': true,
			'zoomSpeedIn': 500,
			'zoomSpeedOut': 500,
			'zoomSpeedChange': 300,
			'overlayShow': true,
			'overlayColor': "#666666",
			'overlayOpacity': 0.3,
			'enableEscapeButton': true,
			'showCloseButton': true,
			'hideOnOverlayClick': true,
			'hideOnContentClick': false,
			'frameWidth':  640,
			'frameHeight':  500,
												'centerOnScroll': true
		});

})

</script>
<!-- END Fancybox for WordPress -->
<meta name="tweetmeme-title" content="How to create chained select with PHP and jQuery?">
<!--Plugin WP Overview (lite) 2011.0101.1111 Active-->

<link rel="stylesheet" href="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/wp-recentcomments.css" type="text/css" media="screen"><script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/wp-recentcomments.js"></script><link href="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/shCore.css" type="text/css" rel="stylesheet"><link href="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/shThemeDefault.css" type="text/css" rel="stylesheet"><meta id="syntaxhighlighteranchor" name="syntaxhighlighter-version" content="3.1.1">

<script src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/bsa.js" async="" type="text/javascript"></script><script>try {  for(var lastpass_iter=0; lastpass_iter < document.forms.length; lastpass_iter++){    var lastpass_f = document.forms[lastpass_iter];    if(typeof(lastpass_f.lpsubmitorig)=="undefined"){      if (typeof(lastpass_f.submit) == "function") {        lastpass_f.lpsubmitorig = lastpass_f.submit;        lastpass_f.submit = function(){          var form = this;          try {            if (document.documentElement && 'createEvent' in document)            {              var forms = document.getElementsByTagName('form');              for (var i=0 ; i<forms.length ; ++i)                if (forms[i]==form)                {                  var element = document.createElement('lpformsubmitdataelement');                  element.setAttribute('formnum',i);                  element.setAttribute('from','submithook');                  document.documentElement.appendChild(element);                  var evt = document.createEvent('Events');                  evt.initEvent('lpformsubmit',true,false);                  element.dispatchEvent(evt);                  break;                }            }          } catch (e) {}          try {            form.lpsubmitorig();          } catch (e) {}        }      }    }  }} catch (e) {}</script></head><body>
<!-- BuySellAds.com Ad Code -->
<script type="text/javascript">
(function(){
  var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = '//s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<!-- END BuySellAds.com Ad Code -->

<div id="top-bar">
    <div class="container top">
        
        <!-- START PAGE NAVIGATION -->
        <div id="access" class="pagine">
            <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
            <div class="menu-header"><ul id="menu-page-header" class="menu"><li id="menu-item-2364" class="menu-item menu-item-type-custom menu-item-home menu-item-2364"><a href="http://www.yourinspirationweb.com/en/">Home</a></li>
<li id="menu-item-2365" class="menu-item menu-item-type-post_type menu-item-2365"><a href="http://www.yourinspirationweb.com/en/authors/">Authors</a></li>
<li id="menu-item-2366" class="menu-item menu-item-type-post_type menu-item-2366"><a href="http://www.yourinspirationweb.com/en/become-an-author/">Become an Author</a></li>
<li id="menu-item-2453" class="menu-item menu-item-type-post_type menu-item-2453"><a href="http://www.yourinspirationweb.com/en/newsletter/">Newsletter</a></li>
<li id="menu-item-2367" class="menu-item menu-item-type-post_type menu-item-2367"><a href="http://www.yourinspirationweb.com/en/subscribe-our-feed-rss/">Subscribe Feed RSS</a></li>
<li id="menu-item-2368" class="menu-item menu-item-type-post_type menu-item-2368"><a href="http://www.yourinspirationweb.com/en/yiw-banner/">YIW banner</a></li>
<li id="menu-item-2415" class="menu-item menu-item-type-post_type menu-item-2415"><a href="http://www.yourinspirationweb.com/en/contact/">Contact</a></li>
</ul></div>        </div>
        <!-- END PAGE NAVIGATION -->
        
        <!-- START NETWORK MENU -->
        <!--<ul class="menu-yiw-magazine">
            <li class="menu-trigger">
                <a href="#" >YIW network</a>
                <ul>
                    <li class="network"><a href="http://www.yourinspirationweb.com" title="">YIWeb</a></li>
                    <li class="network"><a href="http://www.yourinspiration-magazine.com" title="">YIMagazine</a></li>
                </ul>
            </li>
        </ul>-->
        <!-- END NETWORK MENU -->
        <div class="clear"></div>
    </div><!-- container_12 -->
</div><!-- top-bar -->
  
<!-- START CATEGORY NAVIGATION -->
<div class="category-nav">
    <div class="container cat">
        <!-- START LIST CATEGORY -->
        <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
        <div id="category">
            <div class="wp_category"><ul id="menu-category-nav" class="menu"><li id="menu-item-2383" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-2383"><a href="http://www.yourinspirationweb.com/en/category/web/">Web</a>
<ul class="sub-menu">
	<li id="menu-item-2385" class="menu-item menu-item-type-taxonomy menu-item-2385"><a href="http://www.yourinspirationweb.com/en/category/web/xhtml-css/">xhtml &amp; css</a></li>
	<li id="menu-item-2375" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-2375"><a href="http://www.yourinspirationweb.com/en/category/web/php/">php</a></li>
	<li id="menu-item-2370" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-2370"><a href="http://www.yourinspirationweb.com/en/category/web/ajax-and-javascript/">Ajax &amp; Javascript</a></li>
</ul>
</li>
<li id="menu-item-2369" class="menu-item menu-item-type-taxonomy menu-item-2369"><a href="http://www.yourinspirationweb.com/en/category/web/accessibility/">Accessibility</a></li>
<li id="menu-item-2371" class="menu-item menu-item-type-taxonomy menu-item-2371"><a href="http://www.yourinspirationweb.com/en/category/design/">Design</a>
<ul class="sub-menu">
	<li id="menu-item-2378" class="menu-item menu-item-type-taxonomy menu-item-2378"><a href="http://www.yourinspirationweb.com/en/category/showcases/">Showcases</a></li>
	<li id="menu-item-2381" class="menu-item menu-item-type-taxonomy menu-item-2381"><a href="http://www.yourinspirationweb.com/en/category/design/typography/">Typography</a></li>
</ul>
</li>
<li id="menu-item-2373" class="menu-item menu-item-type-taxonomy menu-item-2373"><a href="http://www.yourinspirationweb.com/en/category/guides/">Guides</a></li>
<li id="menu-item-2380" class="menu-item menu-item-type-taxonomy menu-item-2380"><a href="http://www.yourinspirationweb.com/en/category/tutorial/">Tutorial</a></li>
<li id="menu-item-2372" class="menu-item menu-item-type-taxonomy menu-item-2372"><a href="http://www.yourinspirationweb.com/en/category/freebies/">Freebies</a></li>
<li id="menu-item-2377" class="menu-item menu-item-type-taxonomy menu-item-2377"><a href="http://www.yourinspirationweb.com/en/category/web/security-web/">Security</a></li>
<li id="menu-item-2384" class="menu-item menu-item-type-taxonomy menu-item-2384"><a href="http://www.yourinspirationweb.com/en/category/wordpress/">WordPress</a></li>
<li id="menu-item-2379" class="menu-item menu-item-type-taxonomy menu-item-2379"><a href="http://www.yourinspirationweb.com/en/category/thoughts-and-words/">Thoughts &amp; Words</a>
<ul class="sub-menu">
	<li id="menu-item-2382" class="menu-item menu-item-type-taxonomy menu-item-2382"><a href="http://www.yourinspirationweb.com/en/category/thoughts-and-words/various/">Various</a></li>
</ul>
</li>
</ul></div>        </div>
		<!-- END LIST CATEGORY -->
		
		<!-- START LANGUAGE -->
		<ul class="wp_lang">
			<li><a href="http://www.yourinspirationweb.com/" title="Italian Language"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/ita.png" alt="Italian Language" class="lang"></a></li>
	  		<li><a href="http://www.yourinspirationweb.com/en/" title="English Language"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/eng.png" alt="English Language" class="lang"></a></li>
	  	</ul>
	  	<div class="clear"></div>
	  	<!-- END LANGUAGE -->
    </div><!-- container cat -->
</div>
<!-- END CATEGORY NAVIGATION -->

<!-- START CONTAINER -->
<div class="container header">
    <!-- START LOGO -->
    <h1 class="logo">
        <a href="http://www.yourinspirationweb.com/en/" title="Back To Home">
            <img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/logo.gif" alt="Your Inspiration Web">
        </a>
    </h1>
    <!-- END LOGO -->
    
    <!-- START BANNER -->
    <div class="banner">
        <!-- BuySellAds.com Zone Code -->
        <!--<div id="bsap_1250973" class="bsarocks bsap_c1655648cd317859eebd6e4c8c3f5318"></div>-->
        <!-- END BuySellAds.com Zone Code -->
        <a href="http://www.yourinspirationweb.com/en/wp-content/plugins/adrotate/adrotate-out.php?track=16%2C0%2C0"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/tag%2520728x90.jpg" alt="sponsor" class="sponsor" style="border: medium none;"></a>    </div><!-- END BANNER -->

    <div class="clear"></div>
    
    <!-- START TWITTER -->
    <div class="social first">
        <p>
            <a href="http://twitter.com/YIW/" title="Follow on Twitter">
                <img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/twitter.jpg" alt="twitter" class="twitter">
            </a>
            <span>1,607</span> peoples are reading our Tweets.<br>
            <a href="http://twitter.com/YIW/" title="Follow us on Twitter">What about follow us on Twitter?</a>
        </p>
    </div>
    <!-- END TWITTER -->

    <!-- START FEED -->
    <div class="social">  
        <p>
            <a href="http://feeds.feedburner.com/yourinspirationweb/HuJt" title="Subscribe Feed" onclick="javascript: pageTracker._trackPageview('/feed.php');">
                <img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/feed.jpg" alt="feed" class="feed">
            </a>
            <span>2,530 </span> readers have subscribed our Feed.<br>
			<a href="http://feeds.feedburner.com/yourinspirationweb/HuJt" title="Subscribe Feed" onclick="javascript: pageTracker._trackPageview('/feed.php');">
                What you're waiting for?            </a>
        </p>
    </div>
    <!-- END FEED -->
    
        
    <!-- START FACEBOOK -->
    <div class="social">
        <p>
            <a href="http://www.facebook.com/pages/Your-Inspiration-Web/150283556532" title="Follow YIW also on Facebook!">
                <img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/facebook.jpg" alt="facebook" class="facebook">
            </a>
            <span>2,266</span> peoples likes Your Inspiration Web<br>
            <a href="http://www.facebook.com/pages/Your-Inspiration-Web/150283556532" title="Follow YIW also on Facebook!">Follow YIW also on Facebook!</a>
        </p>
    </div>
    <!-- END FACEBOOK -->
    
    <!-- START SEARCH -->
    <div class="social">
        <div id="search">
            <div class="widget widget_search">
    	       
<form method="get" id="searchform" action="http://www.yourinspirationweb.com/en/">
    <input gtbfieldid="1" name="s" value="Search..." onclick="if(this.value == 'Search...') this.value='';" onblur="if(this.value.length == 0) this.value='Search...';" id="s" type="text">&nbsp;
    <input id="searchsubmit" value="&nbsp;" onclick="javascript: pageTracker._trackPageview('/search.php');" type="submit">
</form>            </div>
        </div>
    </div>
    <!-- END SEARCH -->
    <div class="clear"></div>
</div>
<!-- END CONTAINER -->
<!-- START CONTAINER PAGE -->    
<div class="container page">

    <!-- START CONTENT -->
	<div id="content" class="narrowcolumn">

				
		<!-- Begin loop post -->
		<div class="post" id="post-2494">
		
            <!-- BuySellAds.com Zone Code -->
            <div id="bsap_1249811" class="bsarocks bsap_c1655648cd317859eebd6e4c8c3f5318"></div>
            <!-- END BuySellAds.com Zone Code -->
		
            <!-- Begin title post -->
    		<h2 class="titlePost">How to create chained select with PHP and jQuery?</h2>
    		<!-- End title post -->

    		<!-- Begin list author and data and category and comments -->
            <div class="metadati">by <a href="http://www.yourinspirationweb.com/en/author/mtx_maurizio/" title="Posts by Maurizio Tarchini">Maurizio Tarchini</a>&nbsp;|&nbsp;2 November 2010&nbsp;|&nbsp;in: <a href="http://www.yourinspirationweb.com/en/category/web/ajax-and-javascript/" title="View all posts in Ajax &amp; Javascript" rel="category tag">Ajax &amp; Javascript</a>, <a href="http://www.yourinspirationweb.com/en/category/web/" title="View all posts in Web" rel="category tag">Web</a>, <a href="http://www.yourinspirationweb.com/en/category/web/php/" title="View all posts in php" rel="category tag">php</a>&nbsp;|&nbsp;<a href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/#comments" title="Comment on How to create chained select with PHP and jQuery?">7 Comments</a></div>
            <!-- End list author and data and category and comments -->
            
            <div class="tweetmeme_button" style="float: right; margin-left: 10px;"><iframe src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/button_002.htm" scrolling="no" frameborder="0" height="20" width="90"></iframe></div>            
            <div class="clearer"></div>
    		
            <div class="entry">
                <!-- Begin post -->
				<p><img class="aligncenter size-full wp-image-2748" title="select" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/select.jpg" alt="" height="270" width="650"></p>
<div style="padding: 8px 0px;"><div style="float: left;">
<script type="text/javascript"><!--
google_ad_client = "pub-3363093162684932";
/* 336x280, creato 12/05/10 */
google_ad_slot = "3268281764";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/show_ads.js">
</script>
</div></div><div style="padding: 8px 0px;"><div style="float: right;">
<script type="text/javascript"><!--
google_ad_client = "pub-3363093162684932";
/* 250x250, creato 12/05/10 */
google_ad_slot = "0061601561";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/show_ads.js">
</script>
</div>
<div class="clear"></div></div><p>In this article we’ll talk about the <strong>chaining of&nbsp; select</strong> also called&nbsp; &nbsp;<em>select cascade</em>.</p>
<p>It is a procedure&nbsp; that we often find on the web and it consists
 in giving the user the possibility&nbsp; to find a specific data 
through a few passages: practically choosing a category in the first 
select, the second one will be populated with the results related with 
the&nbsp;category selected.</p>
<p>We imagine, for example,&nbsp; a first select where it is possible to
 choose between motorcycles and&nbsp; cars; once we selected the <em>car</em>
 category , the second select will be populated with the brands of the 
cars available. Then selecting a brand, the third select will be 
populated with the models available of this brand. In this article we’ll
 see a very simple example&nbsp; but it will give us the basis&nbsp; to 
comprehend&nbsp; the procedure to do even in the case of&nbsp; 
&nbsp;more complicated cascades.</p>
<p><span id="more-2494"></span></p>
<p>You can examine what we will create in this page of <a href="http://www.yourinspirationweb.com/example/maurizio/select_en/select.php">example</a>.
 I state in advance that the argument is quite advanced and it presumes a
 medium-advance level of knowledge of PHP and of MySql.</p>
<p>As you can see, the example is very minimalist. A first select that 
requests the category in which appear: colours, flowers and tools. A 
second select&nbsp; in which once the category is selected&nbsp; we’ll 
find a list of items concerning that category.</p>
<h2>Create the structure of the database</h2>
<p>So we are going to create a table called <em>categorie</em>s with the fields</p>
<ul>
<li>id_cat</li>
<li>name</li>
</ul>
<p>And another table called&nbsp;<em>type</em> with the following fields</p>
<ul>
<li>id_type</li>
<li>id_cat</li>
<li>name</li>
</ul>
<p>This way we can determine the correct relation between the tables.</p>
<div><img class="aligncenter size-full wp-image-2743" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/select_en.jpg" alt="" height="360" width="463"></div>
<p>Therefore create the database <em>selectExample</em> and execute the 
&nbsp;query &nbsp;that I prepared to help you out in this task. Besides 
creating the tables necessary , it inserts the data&nbsp;we need for the
 exercise.</p>
<div><div id="highlighter_252885" class="syntaxhighlighter nogutter  sql"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="sql keyword">CREATE</code> <code class="sql keyword">TABLE</code> <code class="sql plain">`categories` (</code></div><div class="line number2 index1 alt1"><code class="sql plain">`id_cat` </code><code class="sql keyword">int</code><code class="sql plain">(4) unsigned </code><code class="sql color1">NOT</code> <code class="sql color1">NULL</code> <code class="sql plain">auto_increment,</code></div><div class="line number3 index2 alt2"><code class="sql plain">`</code><code class="sql keyword">name</code><code class="sql plain">` </code><code class="sql keyword">varchar</code><code class="sql plain">(40) </code><code class="sql color1">NOT</code> <code class="sql color1">NULL</code><code class="sql plain">,</code></div><div class="line number4 index3 alt1"><code class="sql keyword">PRIMARY</code> <code class="sql keyword">KEY</code>&nbsp; <code class="sql plain">(`id_cat`)</code></div><div class="line number5 index4 alt2"><code class="sql plain">) ENGINE=MyISAM AUTO_INCREMENT=4 ;</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="sql keyword">INSERT</code> <code class="sql keyword">INTO</code> <code class="sql plain">`categories` (`id_cat`, `</code><code class="sql keyword">name</code><code class="sql plain">`) </code><code class="sql keyword">VALUES</code></div><div class="line number8 index7 alt1"><code class="sql plain">(1, </code><code class="sql string">'colours'</code><code class="sql plain">),</code></div><div class="line number9 index8 alt2"><code class="sql plain">(2, </code><code class="sql string">'flowers'</code><code class="sql plain">),</code></div><div class="line number10 index9 alt1"><code class="sql plain">(3, </code><code class="sql string">'tools'</code><code class="sql plain">);</code></div><div class="line number11 index10 alt2">&nbsp;</div><div class="line number12 index11 alt1"><code class="sql keyword">CREATE</code> <code class="sql keyword">TABLE</code> <code class="sql plain">`type` (</code></div><div class="line number13 index12 alt2"><code class="sql plain">`id_type` </code><code class="sql keyword">int</code><code class="sql plain">(4) unsigned </code><code class="sql color1">NOT</code> <code class="sql color1">NULL</code> <code class="sql plain">auto_increment,</code></div><div class="line number14 index13 alt1"><code class="sql plain">`id_cat` </code><code class="sql keyword">int</code><code class="sql plain">(4) unsigned </code><code class="sql color1">NOT</code> <code class="sql color1">NULL</code><code class="sql plain">,</code></div><div class="line number15 index14 alt2"><code class="sql plain">`</code><code class="sql keyword">name</code><code class="sql plain">` </code><code class="sql keyword">varchar</code><code class="sql plain">(40) </code><code class="sql color1">NOT</code> <code class="sql color1">NULL</code><code class="sql plain">,</code></div><div class="line number16 index15 alt1"><code class="sql keyword">PRIMARY</code> <code class="sql keyword">KEY</code>&nbsp; <code class="sql plain">(`id_type`)</code></div><div class="line number17 index16 alt2"><code class="sql plain">) ENGINE=MyISAM AUTO_INCREMENT=15 ;</code></div><div class="line number18 index17 alt1">&nbsp;</div><div class="line number19 index18 alt2"><code class="sql keyword">INSERT</code> <code class="sql keyword">INTO</code> <code class="sql plain">`type` (`id_type`, `id_cat`, `</code><code class="sql keyword">name</code><code class="sql plain">`) </code><code class="sql keyword">VALUES</code></div><div class="line number20 index19 alt1"><code class="sql plain">(1, 1, </code><code class="sql string">'yellow'</code><code class="sql plain">),</code></div><div class="line number21 index20 alt2"><code class="sql plain">(2, 1, </code><code class="sql string">'green'</code><code class="sql plain">),</code></div><div class="line number22 index21 alt1"><code class="sql plain">(3, 1, </code><code class="sql string">'red'</code><code class="sql plain">),</code></div><div class="line number23 index22 alt2"><code class="sql plain">(4, 1, </code><code class="sql string">'gray'</code><code class="sql plain">),</code></div><div class="line number24 index23 alt1"><code class="sql plain">(5, 1, </code><code class="sql string">'white'</code><code class="sql plain">),</code></div><div class="line number25 index24 alt2"><code class="sql plain">(6, 2, </code><code class="sql string">'daisy'</code><code class="sql plain">),</code></div><div class="line number26 index25 alt1"><code class="sql plain">(7, 2, </code><code class="sql string">'cowslip'</code><code class="sql plain">),</code></div><div class="line number27 index26 alt2"><code class="sql plain">(8, 2, </code><code class="sql string">'lily'</code><code class="sql plain">),</code></div><div class="line number28 index27 alt1"><code class="sql plain">(9, 2, </code><code class="sql string">'sunflower'</code><code class="sql plain">),</code></div><div class="line number29 index28 alt2"><code class="sql plain">(10, 3, </code><code class="sql string">'hammer'</code><code class="sql plain">),</code></div><div class="line number30 index29 alt1"><code class="sql plain">(11, 3, </code><code class="sql string">'screwdriver'</code><code class="sql plain">),</code></div><div class="line number31 index30 alt2"><code class="sql plain">(12, 3, </code><code class="sql string">'spatula'</code><code class="sql plain">),</code></div><div class="line number32 index31 alt1"><code class="sql plain">(13, 3, </code><code class="sql string">'wrench'</code><code class="sql plain">),</code></div><div class="line number33 index32 alt2"><code class="sql plain">(14, 3, </code><code class="sql string">'clamp'</code><code class="sql plain">);</code></div></div></td></tr></tbody></table></div></div>
<h2>Preparation of the main page</h2>
<p>Now let’s prepare the main file that is <em>select.php</em></p>
<p><em><br>
</em></p>
<div><div id="highlighter_360540" class="syntaxhighlighter nogutter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"&gt;</code></div><div class="line number2 index1 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">html</code><code class="xml plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">head</code><code class="xml plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"jquery-1.4.1.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code><code class="xml plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$(document).ready(function(){</code></div><div class="line number7 index6 alt2">&nbsp;</div><div class="line number8 index7 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});</code></div><div class="line number9 index8 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number10 index9 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">head</code><code class="xml plain">&gt;</code></div><div class="line number11 index10 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">body</code><code class="xml plain">&gt;</code></div><div class="line number12 index11 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">form</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"select_form"</code><code class="xml plain">&gt;</code></div><div class="line number13 index12 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">Choose a category:&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;</code></div><div class="line number14 index13 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">select</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"category"</code><code class="xml plain">&gt;</code></div><div class="line number15 index14 alt2">&nbsp;</div><div class="line number16 index15 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">select</code><code class="xml plain">&gt;</code></div><div class="line number17 index16 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;</code></div><div class="line number18 index17 alt1">&nbsp;</div><div class="line number19 index18 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">choose a type:&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;</code></div><div class="line number20 index19 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">select</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"type"</code><code class="xml plain">&gt;</code></div><div class="line number21 index20 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">option</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"0"</code><code class="xml plain">&gt;choose...&lt;/</code><code class="xml keyword">option</code><code class="xml plain">&gt;</code></div><div class="line number22 index21 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">select</code><code class="xml plain">&gt;</code></div><div class="line number23 index22 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;</code></div><div class="line number24 index23 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">input</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"submit"</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"confirm"</code> <code class="xml plain">/&gt;</code></div><div class="line number25 index24 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">form</code><code class="xml plain">&gt;</code></div><div class="line number26 index25 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"result"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number27 index26 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">body</code><code class="xml plain">&gt;</code></div><div class="line number28 index27 alt1"><code class="xml plain">&lt;/</code><code class="xml keyword">html</code><code class="xml plain">&gt;</code></div></div></td></tr></tbody></table></div></div>
<p>As you can see I included &nbsp;<a id="h.0h" title="jQuery" href="http://jquery.com/">jQuery</a>. In fact thanks to an ajax call we’ll populate the second select.</p>
<p>I declared a form containing the first <em>select</em> with no <em>option </em>and<em> </em> the second select containing only an <em>option</em> that is “choose…”. Then we have an element with id <em>result</em> in which at the end we’ll insert the choice made.</p>
<h2>Create the file with the parameters of &nbsp;connection</h2>
<p>Now we create the file <em>db_config.php</em> that will contain the parameters of connection to the database.</p>
<div><div id="highlighter_132038" class="syntaxhighlighter nogutter  php"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="php plain">&lt;?php</code></div><div class="line number2 index1 alt1"><code class="php variable">$host</code> <code class="php plain">= </code><code class="php string">"localhost"</code><code class="php plain">;</code></div><div class="line number3 index2 alt2"><code class="php variable">$user</code> <code class="php plain">= </code><code class="php string">"root"</code><code class="php plain">;</code></div><div class="line number4 index3 alt1"><code class="php variable">$password</code> <code class="php plain">= </code><code class="php string">"*********"</code><code class="php plain">;</code></div><div class="line number5 index4 alt2"><code class="php variable">$db</code> <code class="php plain">= </code><code class="php string">"selectExample"</code><code class="php plain">;</code></div><div class="line number6 index5 alt1"><code class="php plain">?&gt;</code></div></div></td></tr></tbody></table></div></div>
<p>Naturally you have to assign the parameters of your&nbsp;database.</p>
<h2>The php file for the management of the requests</h2>
<p>At this point we start creating the PHP class that will handle the 
elaboration of the information and will give back results. The file will
 be called <em>select.class.php.</em></p>
<div><div id="highlighter_906599" class="syntaxhighlighter nogutter  php"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="php keyword">class</code> <code class="php plain">SelectList</code></div><div class="line number2 index1 alt1"><code class="php plain">{</code></div><div class="line number3 index2 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">protected</code> <code class="php variable">$conn</code><code class="php plain">;</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">public</code> <code class="php keyword">function</code> <code class="php plain">__construct()</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">{</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">}</code></div><div class="line number10 index9 alt1"><code class="php plain">}</code></div></div></td></tr></tbody></table></div></div>
<p>We begin with declaring the class, afterwards the propriety <em>$conn</em>
 that will contain the connection resource to the database&nbsp; and at 
the end the builder method, that at the moment we leave empty.</p>
<p>Now we write the method for the connection to the&nbsp;database.</p>
<div><div id="highlighter_805883" class="syntaxhighlighter nogutter  php"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="php keyword">protected</code> <code class="php keyword">function</code> <code class="php plain">DbConnect()</code></div><div class="line number2 index1 alt1"><code class="php plain">{</code></div><div class="line number3 index2 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">include</code> <code class="php string">"db_config.php"</code><code class="php plain">;</code></div><div class="line number4 index3 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$this</code><code class="php plain">-&gt;conn = mysql_connect(</code><code class="php variable">$host</code><code class="php plain">,</code><code class="php variable">$user</code><code class="php plain">,</code><code class="php variable">$password</code><code class="php plain">) OR </code><code class="php keyword">die</code><code class="php plain">(</code><code class="php string">"Unable to connect to the database"</code><code class="php plain">);</code></div><div class="line number5 index4 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">mysql_select_db(</code><code class="php variable">$db</code><code class="php plain">,</code><code class="php variable">$this</code><code class="php plain">-&gt;conn) OR </code><code class="php keyword">die</code><code class="php plain">(</code><code class="php string">"can not select the database $db"</code><code class="php plain">);</code></div><div class="line number6 index5 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">return</code> <code class="php plain">TRUE;</code></div><div class="line number7 index6 alt2"><code class="php plain">}</code></div></div></td></tr></tbody></table></div></div>
<p>As you see, after&nbsp;I included the parameters I proceed with&nbsp;
 the connection and therefore with the selection of the database.</p>
<p>Now we proceed&nbsp; with the creation of the ShowCategory() method that will create the <em><strong>option </strong></em><strong>of the first </strong><em><strong>select</strong></em>. This method will be executed directly with the page load, we’ll see how afterwards.</p>
<div><div id="highlighter_8840" class="syntaxhighlighter nogutter  php"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="php keyword">public</code> <code class="php keyword">function</code> <code class="php plain">ShowCategory()</code></div><div class="line number2 index1 alt1"><code class="php plain">{</code></div><div class="line number3 index2 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$sql</code> <code class="php plain">= </code><code class="php string">"SELECT * FROM category"</code><code class="php plain">;</code></div><div class="line number4 index3 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$res</code> <code class="php plain">= mysql_query(</code><code class="php variable">$sql</code><code class="php plain">,</code><code class="php variable">$this</code><code class="php plain">-&gt;conn);</code></div><div class="line number5 index4 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$category</code> <code class="php plain">= </code><code class="php string">'&lt;option value="0"&gt;choose...&lt;/option&gt;'</code><code class="php plain">;</code></div><div class="line number6 index5 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">while</code><code class="php plain">(</code><code class="php variable">$row</code> <code class="php plain">= mysql_fetch_array(</code><code class="php variable">$res</code><code class="php plain">))</code></div><div class="line number7 index6 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">{</code></div><div class="line number8 index7 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$category</code> <code class="php plain">.= </code><code class="php string">'&lt;option value="'</code> <code class="php plain">. </code><code class="php variable">$row</code><code class="php plain">[</code><code class="php string">'id_cat'</code><code class="php plain">] . </code><code class="php string">'"&gt;'</code> <code class="php plain">. </code><code class="php variable">$row</code><code class="php plain">[</code><code class="php string">'name'</code><code class="php plain">] . </code><code class="php string">'&lt;/option&gt;'</code><code class="php plain">;</code></div><div class="line number9 index8 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">}</code></div><div class="line number10 index9 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">return</code> <code class="php variable">$category</code><code class="php plain">;</code></div><div class="line number11 index10 alt2"><code class="php plain">}</code></div></div></td></tr></tbody></table></div></div>
<p>As you can see I execute a query that selects <strong>all the lines</strong> of the category table. Afterwards I insert in the variable <em>$category</em> the first <em>option</em>, containing a message that invites the user to make a choice. At the end I add at the variable <em>$category</em> as many <em>option</em> as the items present in the table, being sure to indicate as <em>value</em> the id of the category and as contents of the tag <em>option </em>the name of the category.</p>
<p>Now let’s write the last method that will fetch the value passed from the first <em>select</em> (the id of the category) and will populate the second according to the value passed from the first.</p>
<div><div id="highlighter_611100" class="syntaxhighlighter nogutter  php"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="php keyword">public</code> <code class="php keyword">function</code> <code class="php plain">ShowType()</code></div><div class="line number2 index1 alt1"><code class="php plain">{</code></div><div class="line number3 index2 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$sql</code> <code class="php plain">= </code><code class="php string">"SELECT * FROM type WHERE id_cat=$_POST[id]"</code><code class="php plain">;</code></div><div class="line number4 index3 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$res</code> <code class="php plain">= mysql_query(</code><code class="php variable">$sql</code><code class="php plain">,</code><code class="php variable">$this</code><code class="php plain">-&gt;conn);</code></div><div class="line number5 index4 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$type</code> <code class="php plain">= </code><code class="php string">'&lt;option value="0"&gt;choose...&lt;/option&gt;'</code><code class="php plain">;</code></div><div class="line number6 index5 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">while</code><code class="php plain">(</code><code class="php variable">$row</code> <code class="php plain">= mysql_fetch_array(</code><code class="php variable">$res</code><code class="php plain">))</code></div><div class="line number7 index6 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">{</code></div><div class="line number8 index7 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$type</code> <code class="php plain">.= </code><code class="php string">'&lt;option value="'</code> <code class="php plain">. </code><code class="php variable">$row</code><code class="php plain">[</code><code class="php string">'id_type'</code><code class="php plain">] . </code><code class="php string">'"&gt;'</code> <code class="php plain">. </code><code class="php variable">$row</code><code class="php plain">[</code><code class="php string">'name'</code><code class="php plain">] . </code><code class="php string">'&lt;/option&gt;'</code><code class="php plain">;</code></div><div class="line number9 index8 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">}</code></div><div class="line number10 index9 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">return</code> <code class="php variable">$type</code><code class="php plain">;</code></div><div class="line number11 index10 alt2"><code class="php plain">}</code></div></div></td></tr></tbody></table></div></div>
<p>In this case through the query we’ll select the lines of the <em>type</em> table that have as <em>id_cat</em> the value passed through POST (this value will be passed with an ajax call, but we haven’t written it yet, we’ll see it after).</p>
<p>The rest is similar to the previous method.</p>
<p>Now, considering that whatever operation does this class it is 
necessary the connection to the database, we can invoke the method 
DbConnect() <strong>directly in the constructor method</strong>.</p>
<p>Moreover we can,&nbsp; for convenience, &nbsp;instantiate the class directly in this file.</p>
<p>So here the whole class:</p>
<div><div id="highlighter_170964" class="syntaxhighlighter nogutter  php"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="php plain">&lt;?php</code></div><div class="line number2 index1 alt1"><code class="php keyword">class</code> <code class="php plain">SelectList</code></div><div class="line number3 index2 alt2"><code class="php plain">{</code></div><div class="line number4 index3 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">protected</code> <code class="php variable">$conn</code><code class="php plain">;</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">public</code> <code class="php keyword">function</code> <code class="php plain">__construct()</code></div><div class="line number7 index6 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">{</code></div><div class="line number8 index7 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$this</code><code class="php plain">-&gt;DbConnect();</code></div><div class="line number9 index8 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">}</code></div><div class="line number10 index9 alt1">&nbsp;</div><div class="line number11 index10 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">protected</code> <code class="php keyword">function</code> <code class="php plain">DbConnect()</code></div><div class="line number12 index11 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">{</code></div><div class="line number13 index12 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">include</code> <code class="php string">"db_config.php"</code><code class="php plain">;</code></div><div class="line number14 index13 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$this</code><code class="php plain">-&gt;conn = mysql_connect(</code><code class="php variable">$host</code><code class="php plain">,</code><code class="php variable">$user</code><code class="php plain">,</code><code class="php variable">$password</code><code class="php plain">) OR </code><code class="php keyword">die</code><code class="php plain">(</code><code class="php string">"Unable to connect to the database"</code><code class="php plain">);</code></div><div class="line number15 index14 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">mysql_select_db(</code><code class="php variable">$db</code><code class="php plain">,</code><code class="php variable">$this</code><code class="php plain">-&gt;conn) OR </code><code class="php keyword">die</code><code class="php plain">(</code><code class="php string">"can not select the database $db"</code><code class="php plain">);</code></div><div class="line number16 index15 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">return</code> <code class="php plain">TRUE;</code></div><div class="line number17 index16 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">}</code></div><div class="line number18 index17 alt1">&nbsp;</div><div class="line number19 index18 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">public</code> <code class="php keyword">function</code> <code class="php plain">ShowCategory()</code></div><div class="line number20 index19 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">{</code></div><div class="line number21 index20 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$sql</code> <code class="php plain">= </code><code class="php string">"SELECT * FROM category"</code><code class="php plain">;</code></div><div class="line number22 index21 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$res</code> <code class="php plain">= mysql_query(</code><code class="php variable">$sql</code><code class="php plain">,</code><code class="php variable">$this</code><code class="php plain">-&gt;conn);</code></div><div class="line number23 index22 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$category</code> <code class="php plain">= </code><code class="php string">'&lt;option value="0"&gt;choose...&lt;/option&gt;'</code><code class="php plain">;</code></div><div class="line number24 index23 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">while</code><code class="php plain">(</code><code class="php variable">$row</code> <code class="php plain">= mysql_fetch_array(</code><code class="php variable">$res</code><code class="php plain">))</code></div><div class="line number25 index24 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">{</code></div><div class="line number26 index25 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$category</code> <code class="php plain">.= </code><code class="php string">'&lt;option value="'</code> <code class="php plain">. </code><code class="php variable">$row</code><code class="php plain">[</code><code class="php string">'id_cat'</code><code class="php plain">] . </code><code class="php string">'"&gt;'</code> <code class="php plain">. </code><code class="php variable">$row</code><code class="php plain">[</code><code class="php string">'name'</code><code class="php plain">] . </code><code class="php string">'&lt;/option&gt;'</code><code class="php plain">;</code></div><div class="line number27 index26 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">}</code></div><div class="line number28 index27 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">return</code> <code class="php variable">$category</code><code class="php plain">;</code></div><div class="line number29 index28 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">}</code></div><div class="line number30 index29 alt1">&nbsp;</div><div class="line number31 index30 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">public</code> <code class="php keyword">function</code> <code class="php plain">ShowType()</code></div><div class="line number32 index31 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">{</code></div><div class="line number33 index32 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$sql</code> <code class="php plain">= </code><code class="php string">"SELECT * FROM type WHERE id_cat=$_POST[id]"</code><code class="php plain">;</code></div><div class="line number34 index33 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$res</code> <code class="php plain">= mysql_query(</code><code class="php variable">$sql</code><code class="php plain">,</code><code class="php variable">$this</code><code class="php plain">-&gt;conn);</code></div><div class="line number35 index34 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$type</code> <code class="php plain">= </code><code class="php string">'&lt;option value="0"&gt;choose...&lt;/option&gt;'</code><code class="php plain">;</code></div><div class="line number36 index35 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">while</code><code class="php plain">(</code><code class="php variable">$row</code> <code class="php plain">= mysql_fetch_array(</code><code class="php variable">$res</code><code class="php plain">))</code></div><div class="line number37 index36 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">{</code></div><div class="line number38 index37 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php variable">$type</code> <code class="php plain">.= </code><code class="php string">'&lt;option value="'</code> <code class="php plain">. </code><code class="php variable">$row</code><code class="php plain">[</code><code class="php string">'id_type'</code><code class="php plain">] . </code><code class="php string">'"&gt;'</code> <code class="php plain">. </code><code class="php variable">$row</code><code class="php plain">[</code><code class="php string">'name'</code><code class="php plain">] . </code><code class="php string">'&lt;/option&gt;'</code><code class="php plain">;</code></div><div class="line number39 index38 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">}</code></div><div class="line number40 index39 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">return</code> <code class="php variable">$type</code><code class="php plain">;</code></div><div class="line number41 index40 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php plain">}</code></div><div class="line number42 index41 alt1"><code class="php plain">}</code></div><div class="line number43 index42 alt2">&nbsp;</div><div class="line number44 index43 alt1"><code class="php variable">$opt</code> <code class="php plain">= </code><code class="php keyword">new</code> <code class="php plain">SelectList();</code></div><div class="line number45 index44 alt2"><code class="php plain">?&gt;</code></div></div></td></tr></tbody></table></div></div>
<p>Now let’s go back to work on the main file (<em>select.php</em>)</p>
<p>From the moment that this file will be loaded the first select has be
 populated. We’ll do it inserting the method ShowCategory() in this way:</p>
<div><div id="highlighter_679788" class="syntaxhighlighter nogutter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">body</code><code class="xml plain">&gt;</code></div><div class="line number2 index1 alt1"><code class="xml plain">&lt;?</code><code class="xml keyword">php</code> <code class="xml plain">include "select.class.php"; ?&gt;</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">form</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"select_form"</code><code class="xml plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">Choose a category:&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;</code></div><div class="line number6 index5 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">select</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"category"</code><code class="xml plain">&gt;</code></div><div class="line number7 index6 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;?</code><code class="xml keyword">php</code> <code class="xml plain">echo $opt-&gt;ShowCategory(); ?&gt;</code></div><div class="line number8 index7 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">select</code><code class="xml plain">&gt;</code></div><div class="line number9 index8 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;</code></div></div></td></tr></tbody></table></div></div>
<p>As you see, we include the class already instantiated in the object $opt. Afterwards, between the tag <em>select</em>, we print the result of the ShowCategory() method, that will be the <em>option</em> correctly populated with the values taken from the database.</p>
<p>You can try the script and see that the first &nbsp;<em>select</em> will populate correctly.</p>
<h2>Implement the ajax functionalities</h2>
<p>Now, what we have to do through jQuery is to fetch what will be 
selected in this select and send the data&nbsp; (the id of the category)
 to the method ShowType() that will return us the&nbsp;<em>option</em> to insert in the second&nbsp;<em>select</em>.
 Everything naturally with an ajax call. The code (like always with 
jQuery is very simple) is the following (that goes inserted in the 
function $(document).ready).</p>
<div><div id="highlighter_842059" class="syntaxhighlighter nogutter  jscript"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="jscript plain">$(</code><code class="jscript string">"select#category"</code><code class="jscript plain">).change(</code><code class="jscript keyword">function</code><code class="jscript plain">(){</code></div><div class="line number2 index1 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">id = $(</code><code class="jscript string">"select#category option:selected"</code><code class="jscript plain">).attr(</code><code class="jscript string">'value'</code><code class="jscript plain">);</code></div><div class="line number3 index2 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$.post(</code><code class="jscript string">"select_type.php"</code><code class="jscript plain">, {id:id}, </code><code class="jscript keyword">function</code><code class="jscript plain">(data){</code></div><div class="line number4 index3 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"select#type"</code><code class="jscript plain">).html(data);</code></div><div class="line number5 index4 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">});</code></div><div class="line number6 index5 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">});</code></div></div></td></tr></tbody></table></div></div>
<p>What does this mean?&nbsp; At the occurence of <em>change</em> in the&nbsp;<em>select with</em> id <em>categorie</em>, execute this function that:</p>
<ul>
<li>Enhances the variable <em>id</em> with the attribute <em>value</em> of the option selected.</li>
<li>Sends through POST the&nbsp;variable <em>id to the</em> file <em>select_type.php</em> (that we haven’t written yet, but we’ll do it immediately).</li>
<li>What is returned from this call insert it in the&nbsp;<em>select</em> with id <em>type</em>.</li>
</ul>
<h3>Create a service file</h3>
<p>Obviously the&nbsp;file <em>select_type.php</em> will be a service file that will simply invoke the method &nbsp;ShowType().</p>
<div><div id="highlighter_458402" class="syntaxhighlighter nogutter  php"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="php plain">&lt;?php</code></div><div class="line number2 index1 alt1"><code class="php keyword">include</code> <code class="php string">"select.class.php"</code><code class="php plain">;</code></div><div class="line number3 index2 alt2"><code class="php functions">echo</code> <code class="php variable">$opt</code><code class="php plain">-&gt;ShowType();</code></div><div class="line number4 index3 alt1"><code class="php plain">?&gt;</code></div></div></td></tr></tbody></table></div></div>
<p>At this point you can try the&nbsp;script. Now selecting a category, the second <em>select</em> will get populated correctly.</p>
<h2>Improve the usability</h2>
<p>Now let’s add something else. Do you remember the question on the usabilty faced&nbsp;in the <a id="kkpj" title="precedente articolo su ajax?" href="http://www.yourinspirationweb.com/en/do-you-want-to-implement-ajax-features-but-you-dont-know-how/">previous article on ajax?</a>
 Good, I think that the second select should be disabled when the page 
gets loaded. At the beginning of the call we could replace&nbsp; 
“select” with “wait…”. Once the call has been executed, the select can 
be&nbsp; enabled. This is correct under the point of view of the 
usability. Therefore we modify the code in this way:</p>
<div><div id="highlighter_711519" class="syntaxhighlighter nogutter  jscript"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="jscript plain">$(document).ready(</code><code class="jscript keyword">function</code><code class="jscript plain">(){</code></div><div class="line number2 index1 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"select#type"</code><code class="jscript plain">).attr(</code><code class="jscript string">"disabled"</code><code class="jscript plain">,</code><code class="jscript string">"disabled"</code><code class="jscript plain">);</code></div><div class="line number3 index2 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"select#category"</code><code class="jscript plain">).change(</code><code class="jscript keyword">function</code><code class="jscript plain">(){</code></div><div class="line number4 index3 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"select#type"</code><code class="jscript plain">).attr(</code><code class="jscript string">"disabled"</code><code class="jscript plain">,</code><code class="jscript string">"disabled"</code><code class="jscript plain">);</code></div><div class="line number5 index4 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"select#type"</code><code class="jscript plain">).html(</code><code class="jscript string">"&lt;option&gt;wait...&lt;/option&gt;"</code><code class="jscript plain">);</code></div><div class="line number6 index5 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">id = $(</code><code class="jscript string">"select#category option:selected"</code><code class="jscript plain">).attr(</code><code class="jscript string">'value'</code><code class="jscript plain">);</code></div><div class="line number7 index6 alt2">&nbsp;</div><div class="line number8 index7 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$.post(</code><code class="jscript string">"select_type.php"</code><code class="jscript plain">, {id:id}, </code><code class="jscript keyword">function</code><code class="jscript plain">(data){</code></div><div class="line number9 index8 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"select#type"</code><code class="jscript plain">).removeAttr(</code><code class="jscript string">"disabled"</code><code class="jscript plain">);</code></div><div class="line number10 index9 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"select#type"</code><code class="jscript plain">).html(data);</code></div><div class="line number11 index10 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">});</code></div><div class="line number12 index11 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">});</code></div></div></td></tr></tbody></table></div></div>
<p>Now all we have to is determine <strong>what happens when you press <em>enter</em></strong> . In our case we’ll write the choice made in the element <em>#result</em>. WE should also consider (usability) what&nbsp; happens if the <em>enter</em> button gets pushed <strong>before all the choices have been made</strong>.</p>
<p>This is the code that I will explain later.</p>
<div><div id="highlighter_541331" class="syntaxhighlighter nogutter  jscript"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="jscript plain">$(</code><code class="jscript string">"form#select_form"</code><code class="jscript plain">).submit(</code><code class="jscript keyword">function</code><code class="jscript plain">(){</code></div><div class="line number2 index1 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">cat = $(</code><code class="jscript string">"select#category option:selected"</code><code class="jscript plain">).attr(</code><code class="jscript string">'value'</code><code class="jscript plain">);</code></div><div class="line number3 index2 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">type = $(</code><code class="jscript string">"select#type option:selected"</code><code class="jscript plain">).attr(</code><code class="jscript string">'value'</code><code class="jscript plain">);</code></div><div class="line number4 index3 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code><code class="jscript plain">(cat&gt;0 &amp;&amp; type&gt;0)</code></div><div class="line number5 index4 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{</code></div><div class="line number6 index5 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">result = $(</code><code class="jscript string">"select#type option:selected"</code><code class="jscript plain">).html();</code></div><div class="line number7 index6 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"#result"</code><code class="jscript plain">).html(</code><code class="jscript string">'your choice: '</code><code class="jscript plain">+result);</code></div><div class="line number8 index7 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></div><div class="line number9 index8 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">else</code></div><div class="line number10 index9 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{</code></div><div class="line number11 index10 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">"#result"</code><code class="jscript plain">).html(</code><code class="jscript string">"you must choose two options!"</code><code class="jscript plain">);</code></div><div class="line number12 index11 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></div><div class="line number13 index12 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code><code class="jscript plain">;</code></div><div class="line number14 index13 alt1"><code class="jscript plain">});</code></div></div></td></tr></tbody></table></div></div>
<p>At the occurrence of <em>submit</em>, &nbsp;we take the value of the attribute <em>value</em> of the two &nbsp;<em>select</em>.
 If &nbsp;these values are both greater than zero (therefore a choice in
 the select has been made in the two select), we take the contents of 
the <em>select</em> with id <em>type</em> and we print it in the element <em>#result</em>.</p>
<p>Instead if the two choices haven’t been made, in the element <em>#result</em> we print the error message.</p>
<p>Here <em>select.php</em> complete with all the changes.</p>
<div><div id="highlighter_510861" class="syntaxhighlighter nogutter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"&gt;</code></div><div class="line number2 index1 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">html</code><code class="xml plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">head</code><code class="xml plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"jquery-1.3.2.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code><code class="xml plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$(document).ready(function(){</code></div><div class="line number7 index6 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("select#type").attr("disabled","disabled");</code></div><div class="line number8 index7 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("select#category").change(function(){</code></div><div class="line number9 index8 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("select#type").attr("disabled","disabled");</code></div><div class="line number10 index9 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("select#type").html("&lt;</code><code class="xml keyword">option</code><code class="xml plain">&gt;wait...&lt;/</code><code class="xml keyword">option</code><code class="xml plain">&gt;");</code></div><div class="line number11 index10 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">var id = $("select#category option:selected").attr('value');</code></div><div class="line number12 index11 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$.post("select_type.php", {id:id}, function(data){</code></div><div class="line number13 index12 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("select#type").removeAttr("disabled");</code></div><div class="line number14 index13 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("select#type").html(data);</code></div><div class="line number15 index14 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});</code></div><div class="line number16 index15 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});</code></div><div class="line number17 index16 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("form#select_form").submit(function(){</code></div><div class="line number18 index17 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">var cat = $("select#category option:selected").attr('value');</code></div><div class="line number19 index18 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">var type = $("select#type option:selected").attr('value');</code></div><div class="line number20 index19 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">if(cat&gt;0 &amp;&amp; type&gt;0)</code></div><div class="line number21 index20 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">{</code></div><div class="line number22 index21 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">var result = $("select#type option:selected").html();</code></div><div class="line number23 index22 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("#result").html('your choice: '+result);</code></div><div class="line number24 index23 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}</code></div><div class="line number25 index24 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">else</code></div><div class="line number26 index25 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">{</code></div><div class="line number27 index26 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("#result").html("you must choose two options!");</code></div><div class="line number28 index27 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}</code></div><div class="line number29 index28 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">return false;</code></div><div class="line number30 index29 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});</code></div><div class="line number31 index30 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});</code></div><div class="line number32 index31 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number33 index32 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">head</code><code class="xml plain">&gt;</code></div><div class="line number34 index33 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">body</code><code class="xml plain">&gt;</code></div><div class="line number35 index34 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;?</code><code class="xml keyword">php</code> <code class="xml plain">include "select.class.php"; ?&gt;</code></div><div class="line number36 index35 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">form</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"select_form"</code><code class="xml plain">&gt;</code></div><div class="line number37 index36 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">Choose a category:&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;</code></div><div class="line number38 index37 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">select</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"category"</code><code class="xml plain">&gt;</code></div><div class="line number39 index38 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;?</code><code class="xml keyword">php</code> <code class="xml plain">echo $opt-&gt;ShowCategory(); ?&gt;</code></div><div class="line number40 index39 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">select</code><code class="xml plain">&gt;</code></div><div class="line number41 index40 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;</code></div><div class="line number42 index41 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">Choose a type:&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;</code></div><div class="line number43 index42 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">select</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"type"</code><code class="xml plain">&gt;</code></div><div class="line number44 index43 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">option</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"0"</code><code class="xml plain">&gt;choose...&lt;/</code><code class="xml keyword">option</code><code class="xml plain">&gt;</code></div><div class="line number45 index44 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">select</code><code class="xml plain">&gt;</code></div><div class="line number46 index45 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;&lt;</code><code class="xml keyword">br</code> <code class="xml plain">/&gt;</code></div><div class="line number47 index46 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">input</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"submit"</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"confirm"</code> <code class="xml plain">/&gt;</code></div><div class="line number48 index47 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">form</code><code class="xml plain">&gt;</code></div><div class="line number49 index48 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"result"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number50 index49 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">body</code><code class="xml plain">&gt;</code></div><div class="line number51 index50 alt2"><code class="xml plain">&lt;/</code><code class="xml keyword">html</code><code class="xml plain">&gt;</code></div></div></td></tr></tbody></table></div></div>
<h2>Conclusion</h2>
<p>In this article we saw an application of ajax&nbsp; very useful and 
requested. Considering that it’s an advanced&nbsp; functionality&nbsp; 
it’s obvious that it can seem complicated for those who don’t have a 
certain mastery of php, on the other hand<strong> it cannot be made more simplier than this</strong>.</p>
<p>However we need to say that for a correct application of the 
criterions of accessibility, we should foresee a solution that allows 
the use of this system, even without the use of javascript (and 
therefore of jQuery).</p>
<p>And you,&nbsp; what do you think about it?&nbsp; Did you find this 
article too complicated?&nbsp; Will you use these principles in your 
sites?</p>
<div style="padding: 8px;"><div style="float: left;">
<script type="text/javascript"><!--
google_ad_client = "pub-3363093162684932";
/* 200x90, creato 01/09/10 */
google_ad_slot = "2385679237";
google_ad_width = 200;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/show_ads.js">
</script>
</div></div><div style="padding: 8px;"><div style="float: right;">
<script type="text/javascript"><!--
google_ad_client = "pub-3363093162684932";
/* post bottom en 250x250, creato 31/05/10 */
google_ad_slot = "4545084748";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/show_ads.js">
</script>
</div>
<div class="clear"></div></div><!-- Powered by Adsense Deamon WordPress Plugin, 
    Author : Yong Mook Kim
    Website : http://www.mkyong.com/blog/adsense-daemon-wordpress-plugin/ -->				<!-- End post -->
				
				<!-- Begin pages -->
								<!-- End pages -->
			</div>
			
			<div class="pdf">
                <a href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/?article2pdf=1" title="Download PDF"><strong>Download PDF</strong></a>
			</div>
			
			<div class="tag-article">
                <strong>Tags</strong>: <a href="http://www.yourinspirationweb.com/en/tag/jquery/" rel="tag">jQuery</a>, <a href="http://www.yourinspirationweb.com/en/tag/php/" rel="tag">php</a>, <a href="http://www.yourinspirationweb.com/en/tag/select/" rel="tag">select</a><br>			</div>
			
			<div class="clearer"></div>
			
			    		
    		<!-- START SHARE BOX -->
			<div id="share-box">
                <h2>Like It? Help Us</h2>
                
                <h3>Share It, Thanks!</h3>
                
                <ul id="share-it">
                    <li class="bump"><script type="text/javascript">url_site='http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/';</script><script src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/button_002.js" type="text/javascript"></script><iframe allowtransparency="true" name="DRIGG_EVB-1" id="DRIGG_EVB-1" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/loader.htm" style="border: 0px solid gray;" scrolling="no" frameborder="0" height="71" width="72"></iframe> </li>
                    <li><script type="text/javascript">url_site='http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/';badge_size='compact';</script><script src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/button_003.js" type="text/javascript"></script><iframe allowtransparency="true" name="DRIGG_EVB-2" id="DRIGG_EVB-2" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/load_compact.htm" scrolling="no" frameborder="0" height="16" width="85"></iframe></li>
                    <li><div class="tweetmeme_button" style="float: right; margin-left: 10px;"><iframe src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/button_002.htm" scrolling="no" frameborder="0" height="20" width="90"></iframe></div></li>
                    <li><script src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/hostedbadge.htm"></script><iframe src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/a.htm" style="border: medium none; overflow: hidden; width: 65px; height: 18px;" allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
                    <!--<li><script type="text/javascript">submit_url = '';</script><script type="text/javascript" src="http://www.designfloat.com/evb/button.php"></script></li>-->
                </ul>
			</div>
			<div class="clear"></div>
			<!-- END SHARE BOX -->
			
            <!-- START ABOUT THE AUTHOR -->
            <div class="author-post">
                <h2>The Author </h2>
                
                <div class="avatar-author">
                    <img alt="" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/f41d9f9f2f60f8efd6f3b6d128bc3741.jpg" class="avatar avatar-100 photo" height="100" width="100">                </div>

                <div class="description-author">
                    <p>
                        Maurizio is married to the triad PHP - MySql - 
Apache and, not enough, he has a lover called jQuery.

He has a blog where he tries to describe in detail all of "his lovers". 
His real specialty is the realization of large business application, 
altough he never refuses the commitment of a website.                   
 </p>
                    
                    <p>
                                                    <a href="http://www.mtxweb.ch/php_learn">Author's web site</a>&nbsp;|
                                                Other articles written by <a href="http://www.yourinspirationweb.com/en/author/mtx_maurizio/" title="Posts by Maurizio Tarchini">Maurizio Tarchini</a>                    </p>
                </div>
                
                <div class="clear"></div>
            </div>
            <!-- END ABOUT THE AUTHOR -->
			
			<!-- START RELATED POSTS -->
			
			<div id="comments">


			<h3 id="comments-title">
                7 <span>comments</span>			</h3>


			<ol class="commentlist">
					<li class="comment even thread-even depth-1" id="li-comment-3644">
		<div id="comment-3644" class="comment-container">
    		<div class="comment-author vcard">
    		        			<img alt="" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/8b49bdead49c9c5528bd46e31da99620.gif" class="avatar avatar-75 photo" height="75" width="75">    			<cite class="fn"><a href="http://drf-dol.co.cc/" rel="external nofollow" class="url">Jimson jose</a></cite>     		</div><!-- .comment-author .vcard -->
    		
    		<div class="comment-meta commentmetadata">
                        		
        		<div class="intro">
            		<div class="commentDate">
            		  <a href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/#comment-3644">
            			December 1, 2010 at 3:44 am</a>        			</div>

        			<div class="commentNumber">#&nbsp;1</div>
        		</div>
        			
    			<div class="comment-body"><p>This script is not working in FF<br>
first drop down box is not listing ….<br>
can you update me i had just copied all the files but not working….</p>
</div>
    			
    			
    			<div class="reply">
        			<a rel="nofollow" class="comment-reply-link" href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/?replytocom=3644#respond" onclick='return addComment.moveForm("comment-3644", "3644", "respond", "2494")'>Reply</a>        		</div><!-- .reply -->
    		</div><!-- .comment-meta .commentmetadata -->
    	</div><!-- #comment-##  -->

	</li>
	<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-4940">
		<div id="comment-4940" class="comment-container">
    		<div class="comment-author vcard">
    		        			<img alt="" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/e451aec372cd1ed4db442fa3e6af2c64.gif" class="avatar avatar-75 photo" height="75" width="75">    			<cite class="fn">Jebin</cite>     		</div><!-- .comment-author .vcard -->
    		
    		<div class="comment-meta commentmetadata">
                        		
        		<div class="intro">
            		<div class="commentDate">
            		  <a href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/#comment-4940">
            			February 21, 2011 at 9:47 pm</a>        			</div>

        			<div class="commentNumber">#&nbsp;2</div>
        		</div>
        			
    			<div class="comment-body"><p>The Worst PHP tut I’ve ever seen <img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/icon_sad.gif" alt=":(" class="wp-smiley"> </p>
</div>
    			
    			
    			<div class="reply">
        			<a rel="nofollow" class="comment-reply-link" href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/?replytocom=4940#respond" onclick='return addComment.moveForm("comment-4940", "4940", "respond", "2494")'>Reply</a>        		</div><!-- .reply -->
    		</div><!-- .comment-meta .commentmetadata -->
    	</div><!-- #comment-##  -->

	</li>
	<li class="comment even thread-even depth-1" id="li-comment-4941">
		<div id="comment-4941" class="comment-container">
    		<div class="comment-author vcard">
    		        			<img alt="" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/e451aec372cd1ed4db442fa3e6af2c64.gif" class="avatar avatar-75 photo" height="75" width="75">    			<cite class="fn">Jebin</cite>     		</div><!-- .comment-author .vcard -->
    		
    		<div class="comment-meta commentmetadata">
                        		
        		<div class="intro">
            		<div class="commentDate">
            		  <a href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/#comment-4941">
            			February 21, 2011 at 9:48 pm</a>        			</div>

        			<div class="commentNumber">#&nbsp;3</div>
        		</div>
        			
    			<div class="comment-body"><p>One more thing can you please start a series like<br>
PHP for ABSOLUTE Beginners.</p>
</div>
    			
    			
    			<div class="reply">
        			<a rel="nofollow" class="comment-reply-link" href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/?replytocom=4941#respond" onclick='return addComment.moveForm("comment-4941", "4941", "respond", "2494")'>Reply</a>        		</div><!-- .reply -->
    		</div><!-- .comment-meta .commentmetadata -->
    	</div><!-- #comment-##  -->

	</li>
			</ol>


    <!-- START TRACKBACK & PINGBACK -->
	<h2 id="trackbacks">Trackback e pingback</h2>
		<ol class="trackbacklist">
			<li id="comment-3157">
            <cite><a href="http://topsy.com/www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/?utm_source=pingback&amp;utm_campaign=L2" rel="external nofollow" class="url">Tweets that mention How to create chained select with PHP and jQuery? | Your Inspiration Web -- Topsy.com</a></cite>
			<br>
			[...] This post was mentioned on Twitter by soshableweb, mtx_maurizio
 and V. Tavares (E-Goi), Tom Bangham. Tom Bangham said: How ...		</li>
				<li id="comment-3175">
            <cite><a href="http://www.faqpal.com/story/130042" rel="external nofollow" class="url">You are now listed on FAQPAL</a></cite>
			<br>
			How to create chained select with PHP and jQuery?...

In this article we'll talk about the chaining of select also called ...		</li>
				<li id="comment-3245">
            <cite><a href="http://www.agnisdesigners.co.in/blog/20-jquery-tutorials-of-any-complexity-level.html" rel="external nofollow" class="url">20 jQuery Tutorials of Any Complexity Level | Agnis Designers</a></cite>
			<br>
			[...] 10. How to create chained select with PHP and jQuery [...] 		</li>
				<li id="comment-3424">
            <cite><a href="http://www.jquerylabs.com/chained-select-with-php-and-jquery.html" rel="external nofollow" class="url">Chained Select with PHP and jQuery « Jquery Labs</a></cite>
			<br>
			[...] Tutorial Tutorial Page [...] 		</li>
			</ol>
	<!-- END TRACKBACK & PINGBACK -->
	
		
	


								<div id="respond">
				<h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/#respond" style="display: none;">Cancel reply</a></small></h3>
									<form action="http://www.yourinspirationweb.com/en/wp-comments-post.php" method="post" id="commentform">
												
												
						<p class="comment-form-comment"><label for="comment">Comment<img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/gravatar.gif" alt="avatar" class="comment-avatar"></label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>												
						
																				<p class="comment-form-author"><label for="author">Name</label> <input gtbfieldid="2" id="author" name="author" size="30" aria-required="true" type="text"></p>
<p class="comment-form-email"><label for="email">Email</label> <input gtbfieldid="3" id="email" name="email" size="30" aria-required="true" type="text"></p>
<p class="comment-form-url"><label for="url">Website</label><input gtbfieldid="4" id="url" name="url" size="30" type="text"></p>
												
						
						<p class="form-submit">
							<input name="submit" id="submit" value="Post Comment" type="submit">
							</p><div class="clearer"></div>
							<input name="comment_post_ID" value="2494" id="comment_post_ID" type="hidden">
<input name="comment_parent" id="comment_parent" value="0" type="hidden">
						
						<p style="display: none;"><input id="akismet_comment_nonce" name="akismet_comment_nonce" value="dca4e1083b" type="hidden"></p>

	<div style="clear: both;" class="subscribe-to-comments">
	<div class="leftCheckBox"><input name="subscribe" id="subscribe" value="subscribe" style="width: auto;" type="checkbox"></div>
	<div class="rightCheckBox"><label for="subscribe" id="labelCommentMailNotify">Notify me of followup comments via e-mail</label></div>
	</div>


					</form>
							</div><!-- #respond -->
						
</div><!-- #comments -->
	
		</div>
		<!-- End loop post -->

				
	</div>
	<!-- END CONTENT -->

    <!-- START SIDEBAR -->
    	<div id="sidebar">
        
         <ul>
         
            <li id="text-4" class="widget widget_text">			<div class="textwidget"><!-- BuySellAds.com Zone Code -->
<div id="bsap_1250600" class="bsarocks bsap_c1655648cd317859eebd6e4c8c3f5318"></div>
<!-- END BuySellAds.com Zone Code -->

<div class="clear"></div>

<!-- BuySellAds.com Zone Code -->
<div id="bsap_1246002" class="bsarocks bsap_c1655648cd317859eebd6e4c8c3f5318"></div>
<!-- END BuySellAds.com Zone Code -->

<div class="banner-forum">
<a href="http://forum.yourinspirationweb.com/" title="visita il forum di YIW"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/forum.gif" alt="forum YIW"></a>
</div>

<div class="clear"></div>

<!-- BuySellAds.com Zone Code -->
<div id="bsap_1244924" class="bsarocks bsap_c1655648cd317859eebd6e4c8c3f5318"></div>
<!-- END BuySellAds.com Zone Code --></div>
		<div class="divisor-sidebar"></div></li><li id="text-3" class="widget widget_text"><h2>Follow YIW on Facebook</h2>			<div class="textwidget"><iframe src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/likebox.htm" style="border: medium none; overflow: hidden; width: 410px; height: 330px;" scrolling="no" frameborder="0"></iframe></div>
		<div class="divisor-sidebar"></div></li><li id="text-5" class="widget widget_text"><h2>Follow us also on</h2>			<div class="textwidget"><ul class="social-sidebar">
    <!--<li class="newsletter"><a href="http://www.yourinspirationweb.com/newsletter/" title="Iscriviti alla newsletter di YIW per restare sempre aggiornato!">Newsletter</a></li>-->
    <li class="facebook"><a href="http://www.facebook.com/pages/Your-Inspiration-Web/150283556532" title="Follow YIW on Facebook">Facebook</a></li>
    <li class="delicious"><a href="http://delicious.com/post?url=http://www.yourinspirationweb.com&amp;title=The%20community%20of%20Inspiration%20dedicated%20to%20Webdesign&amp;notes=Community%20dedicated%20to%20webdesign:%20freebies,%20tutorials,%20tips,%20psd%20template,%20showcases" title="Add YIW to your favorites">Delicious</a></li>
    <li class="twitter"><a href="http://twitter.com/YIW/" title="Follow YIW on Twitter">Twitter</a></li>
    <li class="meemi"><a href="http://meemi.com/YourInspirationWeb/" title="Follow YIW on Meemi">Meemi</a></li>
    <li class="feed"><a href="http://feeds.feedburner.com/yourinspirationweb/HuJt" title="Subscribe Feed" onclick="javascript: pageTracker._trackPageview('/feed.php');">Feed</a></li>
</ul>

<div class="clear"></div></div>
		<div class="divisor-sidebar"></div></li><li id="text-8" class="widget widget_text">			<div class="textwidget"><!-- BuySellAds.com Zone Code -->
<div id="bsap_1250975" class="bsarocks bsap_c1655648cd317859eebd6e4c8c3f5318"></div>
<!-- END BuySellAds.com Zone Code --></div>
		<div class="divisor-sidebar"></div></li><li id="widget_featured-posts-3" class="widget widget_featured-posts"><h2>Featured Posts</h2><ul id="yiw-featured-post"><li><a href="http://www.yourinspirationweb.com/en/how-to-create-a-joomla-template-part-two/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_014.jpg" alt="How to create a joomla template? (part two)"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/how-to-create-a-joomla-template-part-two/">How to create a joomla template? (part two)</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/how-to-design-a-corporatebusiness-layout/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_004.jpg" alt="How to design a corporate/business layout?"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/how-to-design-a-corporatebusiness-layout/">How to design a corporate/business layout?</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/left-aligned-websites-are-they-really-to-be-avoided/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb.jpg" alt="Left-aligned websites: are they really to be avoided?"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/left-aligned-websites-are-they-really-to-be-avoided/">Left-aligned websites: are they really to be avoided?</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/how-to-use-regular-expressions-in-javascript/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_006.jpg" alt="How to use regular expressions in JavaScript?"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/how-to-use-regular-expressions-in-javascript/">How to use regular expressions in JavaScript?</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/portfolio-novcard-when-doing-things-small-is-better/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_013.jpg" alt="Portfolio? No,VCard: when doing things “small” is better"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/portfolio-novcard-when-doing-things-small-is-better/">Portfolio? No,VCard: when doing things “small” is better</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/the-mod_rewrite-and-the-magic-of-rewriting-the-url-second-part/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_005.jpg" alt="The mod_rewrite and the magic of rewriting the URL (second part)"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/the-mod_rewrite-and-the-magic-of-rewriting-the-url-second-part/">The mod_rewrite and the magic of rewriting the URL (second part)</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/10-questions-to-vlad-from-vlad-studio/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_002.jpg" alt="10 questions to Vlad from Vlad Studio"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/10-questions-to-vlad-from-vlad-studio/">10 questions to Vlad from Vlad Studio</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/the-tell-tale-signs-of-an-amateur-web-site-and-how-to-avoid-them/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_003.jpg" alt="The tell-tale signs of an amateur Web Site and how to avoid them"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/the-tell-tale-signs-of-an-amateur-web-site-and-how-to-avoid-them/">The tell-tale signs of an amateur Web Site and how to avoid them</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/how-to-increase-the-performance-of-a-website-with-css-sprites/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_008.jpg" alt="How to increase the performance of a website with CSS Sprites"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/how-to-increase-the-performance-of-a-website-with-css-sprites/">How to increase the performance of a website with CSS Sprites</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/styles-in-web-design-the-characteristics-of-a-site-made-with-magazine-style/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_011.jpg" alt="Styles in web design: the characteristics of a site made with magazine style"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/styles-in-web-design-the-characteristics-of-a-site-made-with-magazine-style/">Styles in web design: the characteristics of a site made with magazine style</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/wordpress-lets-take-a-look-at-the-loop/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_009.jpg" alt="WordPress: Let’s take a look at the Loop"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/wordpress-lets-take-a-look-at-the-loop/">WordPress: Let’s take a look at the Loop</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/styles-in-webdesign-the-features-of-a-grunge-layout/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_007.jpg" alt="Styles in webdesign: the features of a grunge layout"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/styles-in-webdesign-the-features-of-a-grunge-layout/">Styles in webdesign: the features of a grunge layout</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/how-to-show-themselves-on-the-own-website-tips-and-trends/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_012.jpg" alt="How to show themselves on the own website: tips and trends"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/how-to-show-themselves-on-the-own-website-tips-and-trends/">How to show themselves on the own website: tips and trends</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/inspiration-40-blue-websites-for-a-more-comforting-web/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb_010.jpg" alt="Inspiration: 40 “blue” websites for a more comforting web"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/inspiration-40-blue-websites-for-a-more-comforting-web/">Inspiration: 40 “blue” websites for a more comforting web</a></h4></li><li><a href="http://www.yourinspirationweb.com/en/plugin-wordpress-follow-us-social-networks-on-the-sidebar/" class="featured-thumb"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/timthumb.gif" alt="Plugin WordPress Follow Us: Social Networks on the Sidebar"></a><h4 class="featured-title"><a href="http://www.yourinspirationweb.com/en/plugin-wordpress-follow-us-social-networks-on-the-sidebar/">Plugin WordPress Follow Us: Social Networks on the Sidebar</a></h4></li></ul><div class="divisor-sidebar"></div></li><li id="delicious-1" class="widget widget_delicious"><h2>Suggested reading</h2><ul class="delicious"><li class="delicious-item"><a href="http://tympanus.net/codrops/2010/12/21/website-tour/" class="delicious-link">Website Tour with jQuery | Codrops</a></li><li class="delicious-item"><a href="http://www.underworldmagazines.com/17-design-conferences-for-2011/" class="delicious-link">17 Design Conferences for 2011</a></li><li class="delicious-item"><a href="http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/" class="delicious-link">Thumbnails Navigation Gallery with jQuery | Codrops</a></li><li class="delicious-item"><a href="http://stylishwebdesigner.com/12-must-see-jquery-slideshow-sliders-plugins-and-tutorials/" class="delicious-link">12 Must See jQuery Slideshow (Sliders) Plugins and Tutorials</a></li><li class="delicious-item"><a href="http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/" class="delicious-link">Collapsing Site Navigation with jQuery | Codrops</a></li><li class="delicious-item"><a href="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php" class="delicious-link">An Awesome CSS3 Lightbox Gallery With jQuery | Tutorialzine demo</a></li><li class="delicious-item"><a href="http://www.designyourway.net/blog/inspiration/strange-examples-of-art-that-youll-love-80-photos/" class="delicious-link">Strange Examples Of Art That You’ll Love – 80 Photos | Design your way</a></li><li class="delicious-item"><a href="http://www.noupe.com/showcases/showcase-of-inspiring-search-box-designs.html" class="delicious-link">Showcase of Inspiring Search Box Designs - Noupe Design Blog</a></li><li class="delicious-item"><a href="http://blueblots.com/wordpress/30-creative-and-attractive-wordpress-footer-designs/" class="delicious-link">30 Creative and Attractive Wordpress Footer Designs | blueblots.com</a></li><li class="delicious-item"><a href="http://www.noupe.com/inspiration/70-bizarre-and-creative-business-cards.html" class="delicious-link">60 Bizarre and Creative Business Cards - Noupe Design Blog</a></li></ul><div class="divisor-sidebar"></div></li><li id="twitter-1" class="widget widget_twitter"><h2><a href="http://twitter.com/YIW" class="twitter_title_link">Recent Tweets</a></h2><ul class="twitter"><li>No public Twitter messages.</li></ul><div class="divisor-sidebar"></div></li><li id="text-7" class="widget widget_text"><h2>Partners &amp; Friends</h2>			<div class="textwidget"><ul>
<li id="linkcat-7" class="widget widget_links">

	<ul class="xoxo blogroll">
<li><a href="http://www.alistapart.com/" target="_blank">A List Apart</a></li>
<li><a href="http://conceptdezain.com/blog/" target="_blank">Concept Dezain</a></li>
<li><a href="http://justcreativedesign.com/" target="_blank">Just Creative Design</a></li>
<li><a href="http://www.lucascobb.com/" target="_blank">Lucas Cobb Design</a></li>
<li><a href="http://www.noupe.com/" target="_blank">Noupe</a></li>
<li><a href="http://www.presidiacreative.com/" target="_blank">Presivia Creative</a></li>
<li><a href="http://webexpedition18.com/" target="_blank">Web Expedition 18</a></li>
<li><a href="http://www.onextrapixel.com/" target="_blank">One Xtra Pixel</a></li>
<li><a href="http://www.webdesignerdepot.com/" target="_blank">Webdesigner Depot</a></li>
<li><a href="http://www.webdesignerwall.com/" target="_blank">Webdesigner Wall</a></li>
<li><a href="http://css-tricks.com/" target="_blank">CSS Tricks</a></li>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Smashing Magazine</a></li>
<li><a href="http://www.smashingshare.com/" target="blank" title="Web Resources, Design Inspiration, Freebies and Tutorial">Smashing Share</a></li>
<li><a href="http://www.admixweb.com/" target="_blank" title="Web Design community &amp; news">Admix Web</a></li>
<li><a href="http://www.designjuices.co.uk/" target="_blank">Design Juices</a></li>
<li style="border: medium none;"><a href="http://www.underworldmagazines.com/" target="_blank">Underworld magazines</a></li>
<li><a href="http://www.webdevtuts.net/" target="_blank">Webdevtuts</a></li>
	
</ul>
</li>
</ul>

<div class="clear"></div></div>
		<div class="divisor-sidebar"></div></li><li id="recentcomments" class="widget widget_recentcomments"><h2>Recent Comments</h2><ul><li id="rc_item_1" class="rc_item"><div class="rc_avatar rc_left"><img alt="" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/7fb8e97ca4d0322cdad566c81437e38a.jpg" class="avatar avatar-45 photo" height="45" width="45"></div><div class="rc_info"><span class="author_name">Nick</span> on <span class="post_title"><a rel="nofollow" href="http://www.yourinspirationweb.com/en/the-obscure-art-of-drag-and-drop-how-to-drag-and-drop-objects/#comment-5100">The Obscure Art of Drag and Drop: How to Drag and Drop Objects?</a></span></div><div class="rc_excerpt">Jquery UI blows, it's bloated as hell. <span class="rc_expand"><a rel="nofollow" href="javascript:void(0);" onclick="RCJS.detail(5100,'http://www.yourinspirationweb.com/en','limit--5|length--100|post--true|pingback--false|trackback--false|avatar--true|avatar_size--45|avatar_position--left|avatar_default--|navigator--true|administrator--true|smilies--false',0,'Loading');">»</a></span></div></li><li id="rc_item_2" class="rc_item"><div class="rc_avatar rc_left"><img alt="" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/92175296bd0300994a417207e4efac14.png" class="avatar avatar-45 photo" height="45" width="45"></div><div class="rc_info"><span class="author_name"><a href="http://www.campcreativegroup.com/" rel="external nofollow" class="url">Sarah</a></span> on <span class="post_title"><a rel="nofollow" href="http://www.yourinspirationweb.com/en/plagiarism-and-web-design-prevention-and-reaction/#comment-5097">Plagiarism and web design: prevention and reaction</a></span></div><div class="rc_excerpt">Actually, my site has been copied many many times, and exposure is exactly why. The more people that... <span class="rc_expand"><a rel="nofollow" href="javascript:void(0);" onclick="RCJS.detail(5097,'http://www.yourinspirationweb.com/en','limit--5|length--100|post--true|pingback--false|trackback--false|avatar--true|avatar_size--45|avatar_position--left|avatar_default--|navigator--true|administrator--true|smilies--false',0,'Loading');">»</a></span></div></li><li id="rc_item_3" class="rc_item"><div class="rc_avatar rc_left"><img alt="" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/1aa295b58f0c3fee6cf1af190ce2149d.png" class="avatar avatar-45 photo" height="45" width="45"></div><div class="rc_info"><span class="author_name"><a href="http://magicfishes.com/" rel="external nofollow" class="url">jeremy</a></span> on <span class="post_title"><a rel="nofollow" href="http://www.yourinspirationweb.com/en/wordpress-from-a-to-z-personalize-the-comments-template/#comment-5089">WordPress from A to Z: personalize the comments template</a></span></div><div class="rc_excerpt">7CeXQG http://dhY3n0fjvTtj48mG9sFnCv.com <span class="rc_expand"><a rel="nofollow" href="javascript:void(0);" onclick="RCJS.detail(5089,'http://www.yourinspirationweb.com/en','limit--5|length--100|post--true|pingback--false|trackback--false|avatar--true|avatar_size--45|avatar_position--left|avatar_default--|navigator--true|administrator--true|smilies--false',0,'Loading');">»</a></span></div></li><li id="rc_item_4" class="rc_item"><div class="rc_avatar rc_left"><img alt="" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/9a6d7425caf2166b7b6e7b96de943a24.png" class="avatar avatar-45 photo" height="45" width="45"></div><div class="rc_info"><span class="author_name">Shawn</span> on <span class="post_title"><a rel="nofollow" href="http://www.yourinspirationweb.com/en/plagiarism-and-web-design-prevention-and-reaction/#comment-5073">Plagiarism and web design: prevention and reaction</a></span></div><div class="rc_excerpt">What about with CMS systems such as wordpress. Their "rules" indicate that in order for a theme to b... <span class="rc_expand"><a rel="nofollow" href="javascript:void(0);" onclick="RCJS.detail(5073,'http://www.yourinspirationweb.com/en','limit--5|length--100|post--true|pingback--false|trackback--false|avatar--true|avatar_size--45|avatar_position--left|avatar_default--|navigator--true|administrator--true|smilies--false',0,'Loading');">»</a></span></div></li><li id="rc_item_5" class="rc_item"><div class="rc_avatar rc_left"><img alt="" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/1e089bca1544e6372aa45284cef8c0ba.jpg" class="avatar avatar-45 photo" height="45" width="45"></div><div class="rc_info"><span class="author_name">Pierre</span> on <span class="post_title"><a rel="nofollow" href="http://www.yourinspirationweb.com/en/plagiarism-and-web-design-prevention-and-reaction/#comment-5072">Plagiarism and web design: prevention and reaction</a></span></div><div class="rc_excerpt">Hey there,I'm reading your blog wich I find greatly interesting. I'm creating a template that I'd li... <span class="rc_expand"><a rel="nofollow" href="javascript:void(0);" onclick="RCJS.detail(5072,'http://www.yourinspirationweb.com/en','limit--5|length--100|post--true|pingback--false|trackback--false|avatar--true|avatar_size--45|avatar_position--left|avatar_default--|navigator--true|administrator--true|smilies--false',0,'Loading');">»</a></span></div></li><li id="rc_nav"><div><div id="rc_older"><a rel="nofollow" href="javascript:void(0);" onclick="RCJS.page('http://www.yourinspirationweb.com/en','limit--5|length--100|post--true|pingback--false|trackback--false|avatar--true|avatar_size--45|avatar_position--left|avatar_default--|navigator--true|administrator--true|smilies--false',5,'Loading');">Older »</a></div><div class="rc_fixed"></div></div></li></ul><div class="divisor-sidebar"></div></li>			
			<li class="freebies"><h2>Freebies</h2></li>
            
            <li><ul>                    <li class="risorse-free"><a href="http://www.yourinspirationweb.com/en/twitter-5-themes-ready-for-use-to-display-on-your-site-the-latest-tweet/">Twitter Theme:</a> 5 free themes ready to use to embed Twitter on your site</li>
			                    <li class="risorse-free"><a href="http://www.yourinspirationweb.com/en/how-to-design-a-layout-in-magazine-style-tutorial-and-psd/">YIMagazine:</a> tutorial and psd for a magazine style layout.</li>
			                    <li class="risorse-free"><a href="http://www.yourinspirationweb.com/en/plugin-wordpress-follow-us-social-networks-on-the-sidebar/">Follow us:</a> a wordpress plugin to show Social Networks on your blog's sidebar.</li>
			                    <li class="risorse-free"><a href="http://www.yourinspirationweb.com/en/how-to-design-a-simple-and-professional-layout-we-ll-do-it-together-in-a-few-simple-steps/">Minimal YIW:</a> minimal style layout for your portfolio.</li>
			                    <li class="risorse-free"><a href="http://www.yourinspirationweb.com/en/how-to-make-sure-of-not-having-committed-errors-before-launching-the-website-online/">Check List:</a> the compulsory error check before your site is on-line.</li>
			</ul></li>		</ul>
	</div>

    <!-- END SIDEBAR -->
	
	<div class="clearer"></div>
	
</div>
<!-- END CONTAINER PAGE -->

<!-- START FOOTER -->

<div class="container credits">
    <div id="footer">
        <div class="menu-footer"><ul id="menu-nav-footer" class="menu"></ul></div>        
        <p>
            Copyright 2009-2011&nbsp;©&nbsp;
            
            <a href="http://www.yourinspirationweb.com/en/" title="Your Inspiration Web" rel="home">
                <img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/logo_footer.png" alt="YIW" class="logo-footer">&nbsp;
            </a>&nbsp;
            
            Your Inspiration - P.IVA 04875810873<br>
        </p>
        
        <p>
            <a href="http://feeds.feedburner.com/yourinspirationweb/HuJt" title="Subscribe Feed" onclick="javascript: pageTracker._trackPageview('/feed.php');">
                <img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/feed.png" alt="feed">&nbsp;
            </a>
            
            <a href="http://www.facebook.com/pages/Your-Inspiration-Web/150283556532" title="Follow YIW also on Facebook!">
                <img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/facebook.png" alt="facebook">&nbsp;
            </a>
            
            <a href="http://twitter.com/YIW/" title="Follow on Twitter">
                <img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/twitter.png" alt="twitter">&nbsp;
            </a>
        </p>
    </div><!-- #footer -->
</div><!-- container credits-->
    
<div id="thanks">
	<div class="center">
		<h4>Thank you for subscribing to our lists.</h4>

        <p>
            Your email has been added in our system. Soon you will receive an email 
            asking you to confirm your subscription. <br>
            Please click on the link in the message to confirm it.
        </p>
	</div>
</div>

<div style="bottom: -200px;" id="year">
	<div id="main">
		<div id="book"><a href="http://en.calameo.com/read/00037804805e80d8383bc" title="View Preview"></a></div>
		<div id="message"></div>
		<div id="form"></div>
		
		<form action="" id="news" method="post">

			<fieldset>
				<label for="name">Insert your Name</label>
				<input gtbfieldid="5" id="name" name="attribute2" class="text" type="text">
				<label for="emailbanner">Your email address</label>
				<input gtbfieldid="6" id="emailbanner" name="email" class="text" type="text">
			</fieldset>
		</form>
		
		<a href="http://en.calameo.com/read/00037804805e80d8383bc" id="preview" target="_blank">Preview</a>

		
		<a href="#" id="register"><!-- --></a>
		
	</div>

	<div class="links">
		<a href="#" id="kill">not show more</a>
		<a href="#" id="hide">close [x]</a>
	</div>

</div>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/jquery_003.js"></script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/menuYiwMagazine.js"></script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/common.js"></script>

<script src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/button.js" type="text/javascript"></script>
<!--Plugin WP Overview (lite) 2011.0101.1111 Active-->
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/shCore.js"></script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/shBrushSql.js"></script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/shBrushXml.js"></script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/shBrushPhp.js"></script>
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/shBrushJScript.js"></script>
<script type="text/javascript">
	(function(){
		var corecss = document.createElement('link');
		var themecss = document.createElement('link');
		var corecssurl = "http://www.yourinspirationweb.com/en/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.83b";
		if ( corecss.setAttribute ) {
				corecss.setAttribute( "rel", "stylesheet" );
				corecss.setAttribute( "type", "text/css" );
				corecss.setAttribute( "href", corecssurl );
		} else {
				corecss.rel = "stylesheet";
				corecss.href = corecssurl;
		}
		document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
		var themecssurl = "http://www.yourinspirationweb.com/en/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css?ver=3.0.83b";
		if ( themecss.setAttribute ) {
				themecss.setAttribute( "rel", "stylesheet" );
				themecss.setAttribute( "type", "text/css" );
				themecss.setAttribute( "href", themecssurl );
		} else {
				themecss.rel = "stylesheet";
				themecss.href = themecssurl;
		}
		//document.getElementById("syntaxhighlighteranchor").appendChild(themecss);
		document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
	})();
	SyntaxHighlighter.config.strings.expandSource = '+ expand source';
	SyntaxHighlighter.config.strings.help = '?';
	SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n';
	SyntaxHighlighter.config.strings.noBrush = 'Can\'t find brush for: ';
	SyntaxHighlighter.config.strings.brushNotHtmlScript = 'Brush wasn\'t configured for html-script option: ';
	SyntaxHighlighter.defaults['gutter'] = false;
	SyntaxHighlighter.defaults['pad-line-numbers'] = true;
	SyntaxHighlighter.all();
</script>

<!-- Begin W3Counter Secure Tracking Code -->
<script type="text/javascript" src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/securetracker.js"></script>
<script type="text/javascript">w3counter(33233);</script><a href="http://www.w3counter.com/"><img src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/tracker.png" style="border: 0pt none; width: 0pt; height: 0pt;" alt="W3Counter Web Stats"></a><noscript><div><img src="https://www.w3counter.com/tracker.php?id=33233" style="border:0px;width:0px;height:0px;" alt="W3Counter" /></div></noscript><!-- End W3Counter Secure Tracking Code-->
		
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="How%20to%20create%20chained%20select%20with%20PHP%20and%20jQuery%20%20_%20Your%20Inspiration%20Web_files/ga.js" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8632327-3");
pageTracker._trackPageview();
} catch(err) {}</script>	
<!-- END FOOTER -->

<!-- Dynamic page generated in 3.404 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2011-04-13 06:46:24 -->
<!-- super cache --><div id="fancy_overlay"></div><div id="fancy_loading"><div></div></div><div id="fancy_outer"><div id="fancy_inner"><div id="fancy_close"></div><div id="fancy_bg"><div class="fancy_bg" id="fancy_bg_n"></div><div class="fancy_bg" id="fancy_bg_ne"></div><div class="fancy_bg" id="fancy_bg_e"></div><div class="fancy_bg" id="fancy_bg_se"></div><div class="fancy_bg" id="fancy_bg_s"></div><div class="fancy_bg" id="fancy_bg_sw"></div><div class="fancy_bg" id="fancy_bg_w"></div><div class="fancy_bg" id="fancy_bg_nw"></div></div><a href="javascript:;" id="fancy_left"><span class="fancy_ico" id="fancy_left_ico"></span></a><a href="javascript:;" id="fancy_right"><span class="fancy_ico" id="fancy_right_ico"></span></a><div id="fancy_content"></div></div></div><div id="fancy_title"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="fancy_title" id="fancy_title_left"></td><td class="fancy_title" id="fancy_title_main"><div></div></td><td class="fancy_title" id="fancy_title_right"></td></tr></tbody></table></div></body></html>